<template>
<div>
        <p>刷新次数: {{ count }}</p>
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">

            <div class="home" ref="fresh" :style="{height:freshHeight +'px','overflow-y':'scroll','box-sizing': 'border-box','padding-bottom':'80px'}">
              <Music :item="item" 
          v-for="item in playlists" :key="item.id"></Music>
            </div>
      </van-pull-refresh>
</div>
    
</template>

<script>
import Music from '../../src/components/Music'
import { getMovie } from "../model/index";
export default {
  components: {
    Music
  },
  data() {
    return {
      count: 0,
      isLoading: false,
      playlists:[],
      freshHeight: ''
    };
  },
  mounted() {
    this.freshHeight = document.documentElement.clientHeight- this.$refs.fresh.getBoundingClientRect().top;
    // this.getLists()
  },
  methods: {
    onRefresh() {
        this.isLoading = false;
      this.getLists()
    },
    getLists(){
      // console.log(this.$bus)
      getMovie({offset:this.$data.playlists.length}).then(res=>{
        // console.log(this.$data.playlists)
        // console.log(res.data.playlists)
        let result = [...this.$data.playlists,...res.data.playlists]
        this.isLoading = false;
        this.playlists = result
      })
    },
  },
  created() {
    this.getLists()
  },
};
</script>
<style scoped>
.home{
    display: grid;
    align-items: top;
    justify-content: center;
    grid-template-columns: repeat(3,1fr);
    grid-row-gap: 20px;
  }
</style>